<template>
  <div class="app-container">
    <!-- {{list}} -->
    <div style="padding: 5px;" />
    <el-table :data="list" border row-key="id" align="left">
      <el-table-column label="编号" align="center" width="100px">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center">
        <template slot-scope="scope">
          {{ scope.row.desc }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="有权限人员" align="center">
        <template slot-scope="scope">
          {{ scope.row.userNames }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250px" align="center">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" plain @click="showAddPermissionUsersDialog(scope.row.id)">设置权限人员</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="权限人员" :visible.sync="addPermissionUsersDialog.visible" width="50%" :close-on-click-modal="false" top="5vh">
      <div>
        <el-form ref="form" label-width="120px" label-position="top">
          <el-form-item>
            <el-checkbox-group v-model="addPermissionUsersDialog.users">
              <el-checkbox v-for="(item,index) in users" :key="index" :label="item.uid">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPermissionUsersDialog.visible = false">关 闭</el-button>
        <el-button type="primary" @click="addPermissionUsers()">设 置</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  websock
} from '@/websock'
export default {
  data() {
    return {
      list: null,
      users: [],
      addPermissionUsersDialog: {
        visible: false,
        id: 0,
        users: []
      }
    }
  },
  async created() {
    this.fetchData()

    try {
      const res = await websock.getAllUsers()
      console.log('created', res)
      this.users = res
    } catch (err) {
      console.error(err)
      this.$message.error(err.message || 'error')
    }
  },
  methods: {
    // 获取数据
    fetchData() {
      websock.getRootConfig().then(data => {
        console.log('root config', data)
        this.list = data
      })
    },
    showPermissionUsersDialog(id) {
      console.log(id)
    },
    async showAddPermissionUsersDialog(id) {
      try {
        this.addPermissionUsersDialog.id = id
        const res = await websock.getPermissionsUsers({ id })
        this.addPermissionUsersDialog.users = res
        this.addPermissionUsersDialog.visible = true
      } catch (err) {
        console.error(err)
        this.$message.error(err.message || 'error')
      }
    },
    addPermissionUsers() {
      console.log('addPermissionUsersDialog.users', this.addPermissionUsersDialog.users)
      websock.setPermissionUsers({ id: this.addPermissionUsersDialog.id, users: this.addPermissionUsersDialog.users }).then(() => {
        this.addPermissionUsersDialog.visible = false
        this.fetchData()
      })
    }
  }
}
</script>
